<template>
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <span>角色信息列表</span>
      </div>
    </template>

    <el-table :data="loadeditems" border style="width: 100%">
      <el-table-column prop="roleid" label="角色编号" width="180" />
      <el-table-column prop="rname" label="角色名称" width="180" />
      <el-table-column prop="info" label="详情" />
      <el-table-column label="Operations" min-width="80">
        <template #default="scope">
          <el-switch
            v-model="scope.row.nbl"
            class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            active-text="正常"
            inactive-text="禁用"
            :active-value="1"
            :inactive-value="0"
            @change="roleNblSwitch(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="授权">
        <template #default="scope">
          <el-button @click="auth(scope.row)" type="danger">授权</el-button>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>Footer content</template>
  </el-card>
  <role-drawer></role-drawer>
</template>

<script setup>
import useRoleStore from '@/stores/role.js'
import { storeToRefs } from 'pinia'

import RoleDrawer from './RoleDrawer.vue'

const auth = (row) => {
  roleStore.showDrawer(row)
}

const roleStore = useRoleStore()
const { loadeditems } = storeToRefs(roleStore)
const roleNblSwitch = (row) => {
  roleStore.modItem(row)
}
roleStore.findAll()
</script>
